<template>
  <div class="filter">
    <div class="filter_left">{{ title }}：</div>
    <div class="more" v-if="isMore" :class="{'up':!isCollapse,'down':isCollapse}" @click="isCollapse = !isCollapse">{{isCollapse ? '更多' : '收起'}}<a-icon type="down"/></div>
    <div ref="filterContent" class="filter_content" :class="isCollapse && 'hid'">
      <div class="filter_content_item all" @click="changeParams('')" :class="{'active':params.length===0}">全部</div>
      <div class="filter_content_item" v-for="item in data" :key="item.code" @click="changeParams(item.code)" :class="{'active':params.includes(item.code)}"> {{ item.name }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FilterItem',
  props: {
    data: {
      type: Array,
      default: () => []
    },
    title: '',
    defaultParams: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      isCollapse: true,
      isMore: false
    }
  },
  mounted(){
    this.isMore = ['应用行业','应用场景', '交付形态'].includes(this.title);
  },
  computed:{
    params:{
      get(){
        return this.defaultParams
      },
      set(val){
        this.$emit('input', val)
      }
    }
  },
  methods: {
    changeParams (id) {
      this.$emit('ok',id?[id]:[])
    }
  }
}
</script>

<style scoped lang="scss">
@import "../../../assets/css/constants";
.filter {
  margin: 0 20px;
  border-bottom: 1px dashed #E2E2E2;
  display: flex;
  align-items: flex-start;
  position: relative;

  &:last-child {
    border-bottom: none;
  }
  .hid{
    height: 50px;
    overflow: hidden;
  }
  &_left {
    font-size: 12px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    width: 100px;
    font-weight: 500;
    color: #323232;
    text-align: left;
    line-height: 50px;
  }

  &_content {
    width: 87%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    &.collapse {
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow: hidden;
    }

    &_item {
      border-radius: 13px;
      border: 1px solid transparent;
      color: #323232;
      line-height: 12px;
      padding: 18px 30px 18px 0;
      cursor: pointer;

      &.all {
        line-height: 12px;
        padding: 7px 14px;
        margin-right: 30px;

        &:hover {
          border-color: $mainColor;
        }

        &.active {
          border-color: $mainColor;
        }
      }

      &:hover {
        color: $mainColor;
      }

      &.active {
        color: $mainColor;
      }
    }
  }
  .more{
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 15px;
    &.down {
      i {
        margin-left: 4px;
        rotate: 0deg;
        transition: rotate .3s;
      }
    }

    &.up {
      i {
        margin-left: 4px;
        rotate: 180deg;
        transition: rotate .3s;
      }
    }
  }
}
</style>
